<template>
    <div class="page-wrap">
        <sys-set @success="sysSetChange" :defaultSystem="defaultSystem" />
        <a-divider class="full-divider-h" />
        <flexbox justify="space-between" align="flex-start" style="margin: 16px 0">
            <filter-form @search="handleSearch" />
            <flexbox>
                <a-radio-group v-model:value="showType" button-style="solid" @change="handleRadioChange">
                    <a-radio-button value="2">产品需求维度</a-radio-button>
                    <a-radio-button value="1">按业务需求分组</a-radio-button>
                    <a-radio-button value="3">按版本分组</a-radio-button>
                </a-radio-group>
                <a-tooltip title="表格列配置">
                    <column-setting ref="columnSettingRef" class="margin-l-8" :columns="settingColumns" @setColumns="setColumns" />
                </a-tooltip>
            </flexbox>
        </flexbox>
        <custom-table
            autoResize
            rowKey="id"
            size="small"
            :loading="loading"
            :columns="tableColumns"
            :data-source="list"
            :pagination="paginationConfig"
            v-bind="bindValues"
            @change="handleTableChange"
        >
            <template #productName="{ record, text }">
                <a @click="jumpTo({ type: 1, id: record.id })">{{ text }}</a>
            </template>
            <template #versionNumber="{ record, text }">
                <a @click="jumpTo({ type: 3, id: record.versionId || record.id })" v-if="!(showType === '3' && record.versionId)">{{ text }}</a>
                <!-- 按版本分组 -->
                <span class="disable-font-color" v-if="showType === '3'">{{
                    record.pmpProductTrackTimeDTOs ? `（${record.pmpProductTrackTimeDTOs.length}条记录）` : ''
                }}</span>
            </template>
            <template #businessName="{ record, text }">
                <span :style="{ marginLeft: record.pmpProductTrackTimeDTOs ? '' : '20px' }">
                    <a @click="jumpTo({ type: 2, id: record.businessId })" v-if="['2', '3'].includes(showType)">{{ text }}</a>
                    <a @click="jumpTo({ type: 2, id: record.id })" v-else>{{ !record.businessId || record.pmpProductTrackTimeDTOs ? text : '' }}</a>
                    <!-- 按业务需求分组 -->
                    <span class="disable-font-color" v-if="showType === '1'">{{
                        record.pmpProductTrackTimeDTOs ? `（${record.pmpProductTrackTimeDTOs.length}条记录）` : ''
                    }}</span>
                </span>
            </template>
            <template #status="{ text, record }">
                <flexbox>
                    <h-status-badge :status="text" v-if="!(showType === '3' && !record.versionId && record.pmpProductTrackTimeDTOs)" />
                </flexbox>
            </template>
            <template #businessConfirmTime="{ text }">
                <span v-if="!(showType === '3' && !record.versionId && record.pmpProductTrackTimeDTOs)">{{ $filters.dateFilter(text) }}</span>
            </template>
            <template #businessCreateTime="{ text }">
                <span v-if="!(showType === '3' && !record.versionId && record.pmpProductTrackTimeDTOs)">{{ $filters.dateFilter(text) }}</span>
            </template>
            <template #businessAcceptTime="{ record, text }">
                <span v-if="showType === '2'">
                    {{ $filters.dateFilter(text) }}
                </span>
                <span v-else>
                    {{ !record.businessId || record.pmpProductTrackTimeDTOs ? $filters.dateFilter(text) : '' }}
                </span>
            </template>
            <template #businessSubmitTime="{ text }">
                <span v-if="!(showType === '3' && !record.versionId && record.pmpProductTrackTimeDTOs)"> {{ $filters.dateFilter(text) }}</span>
            </template>
            <template #versionConfirmTime="{ text }">
                {{ $filters.dateFilter(text) }}
            </template>
            <template #productAddVersionTime="{ text }">
                {{ $filters.dateFilter(text) }}
            </template>
            <template #versionRanddPlanStartTime="{ text }">
                {{ $filters.dateFilter(text) }}
            </template>
            <template #versionRanddPlanEndTime="{ text }">
                {{ $filters.dateFilter(text) }}
            </template>
            <template #versionRanddRealStartTime="{ text }">
                {{ $filters.dateFilter(text) }}
            </template>
            <template #versionRanddRealEndTime="{ text }">
                {{ $filters.dateFilter(text) }}
            </template>
            <template #versionTestPlanStartTime="{ text }">
                {{ $filters.dateFilter(text) }}
            </template>
            <template #versionTestPlanEndTime="{ text }">
                {{ $filters.dateFilter(text) }}
            </template>
            <template #versionTestRealStartTime="{ text }">
                {{ $filters.dateFilter(text) }}
            </template>
            <template #versionTestRealEndTime="{ text }">
                {{ $filters.dateFilter(text) }}
            </template>
            <template #versionAutoTestTime="{ text }">
                {{ $filters.dateFilter(text) }}
            </template>
            <template #versionDeliveryTime="{ text }">
                {{ $filters.dateFilter(text) }}
            </template>
            <template #versionExpectTime="{ text }">
                {{ $filters.dateFilter(text) }}
            </template>
            <template #versionOnlineTime="{ text }">
                {{ $filters.dateFilter(text) }}
            </template>
            <template #versionOnlineRealTime="{ text }">
                {{ $filters.dateFilter(text) }}
            </template>
            <template #createTime="{ text }">
                {{ $filters.dateFilter(text) }}
            </template>
            <template #updateTime="{ text }">
                {{ $filters.dateFilter(text) }}
            </template>
            <template #riskCount="{ text, record }">
                <flexbox>
                    <a-tag color="orange" v-if="text > 0">{{ text }}项风险</a-tag>
                    <a @click="jumpTo({ type: 4, id: record.id })" v-if="showType === '1' && record.businessId">详情</a>
                    <a @click="jumpTo({ type: 4, id: record.id })" v-if="showType === '2'">详情</a>
                    <a @click="jumpTo({ type: 4, id: record.id })" v-if="showType === '3' && record.versionId">详情</a>
                </flexbox>
            </template>
        </custom-table>
    </div>
</template>

<script lang="ts">
import { useMountedAndActivated } from '@/hooks/common/useMountedAndActivated';
import FilterForm from './components/FilterForm.vue';
import {
    useTableData,
    useTableLoading,
    usePagination,
    useTableColumns,
    useTableExpand,
    useTableFormSearch,
    useTableToolbar
} from '@/components/Table/hooks/index';
import { HStatusBadge, CustomTable, ColumnSetting, SysSet } from '@/components';
import { useRouter, useRoute } from 'vue-router';
import { defineComponent, ref, unref, reactive, toRefs, computed, nextTick } from 'vue';
export default defineComponent({
    name: 'requireTrack',
    components: {
        FilterForm,
        HStatusBadge,
        CustomTable,
        ColumnSetting,
        SysSet
    },
    setup() {
        const router = useRouter();
        const route = useRoute();
        const { loading, setLoading } = useTableLoading();
        const { paginationConfig, setPaginationConfig } = usePagination();
        const { columns: tableColumns, setColumns, settingColumns } = useTableColumns('proRequireTrack');
        const { list, searchQuery, getList, setList, handleTableChange, setSearchQuery } = useTableData(
            setLoading,
            paginationConfig,
            setPaginationConfig,
            'requireTrack'
        );
        const { handleExpandIcon, onExpandChange } = useTableExpand('pmpProductTrackTimeDTOs', list, setList);
        const { handleSearch } = useTableFormSearch(setPaginationConfig, setSearchQuery, getList);
        const { exportAllFile } = useTableToolbar(searchQuery, paginationConfig);
        const state = reactive<any>({
            showType: '2',
            defaultSystem: null
        });
        const columnSettingRef = ref<any>();
        const bindValues = computed(() => {
            const obj = {
                expandIcon: handleExpandIcon,
                onExpand: onExpandChange
            };
            return state.showType === '2' ? {} : obj;
        });
        setSearchQuery({
            type: '2'
        });
        const handleRadioChange = (e) => {
            const type = e.target.value;
            setPaginationConfig({
                current: 1
            });
            setSearchQuery({
                type
            });
            getList();
            let no = '';
            switch (type) {
                case '1':
                    no = 'taskRequireTrack';
                    break;
                case '2':
                    no = 'proRequireTrack';
                    break;
                case '3':
                    no = 'versionRequireTrack';
                    break;
            }
            const target = useTableColumns(no);
            setColumns(target.settingColumns.value, no);
            nextTick(() => {
                unref(columnSettingRef).init();
            });
        };
        const jumpTo = ({ type, id }) => {
            let path = '';
            const query = { id };
            switch (type) {
                case 1:
                    path = '/productRequire/productDetail';
                    break;
                case 2:
                    path = '/taskRequire/taskDetail';
                    break;
                case 3:
                    path = '/version/versionDetail';
                    break;
                case 4:
                    path = '/energyManage/requireTrack/riskAnalysis';
                    break;
            }
            router.push({
                path,
                query
            });
        };
        // 自定义系统回调
        const sysSetChange = (system: number) => {
            setPaginationConfig({
                current: 1
            });
            setSearchQuery({
                systemId: system
            });
            getList();
        };
        if (route.query.systemId) {
            state.defaultSystem = route.query.systemId;
        }
        useMountedAndActivated(getList, false);
        return {
            exportAllFile,
            list,
            tableColumns,
            settingColumns,
            loading,
            handleExpandIcon,
            paginationConfig,
            handleTableChange,
            onExpandChange,
            handleSearch,
            getList,
            setColumns,
            ...toRefs(state),
            columnSettingRef,
            bindValues,
            handleRadioChange,
            jumpTo,
            sysSetChange
        };
    }
});
</script>

<style scoped lang="less">
.page-wrap {
    min-height: 100%;
    padding: 8px 24px 12px 24px;
    background: #fff;
}
</style>